import './index.css'
import Form from './components/Form/Form';
import FormItem from './components/Form/FormItem'
import { useRef, useState } from 'react'
const Config = (props) => {
  const { onIncreaseDataSheet, onCancel } = props
  const submitRef = useRef()
  const [keys, setKeys] = useState(['key'])
  const onIncrease = () => {
    keys.push('key')
    setKeys([...keys])
  }
  const onSubmit = () => {
    const result = submitRef.current.onSubmit()
    onIncreaseDataSheet.call(this, result, submitRef.current.onVerify)
  }
  return (
    <div className="config-container">
      <div className="config-input-field">
        <Form className="config-form-class" ref={submitRef}>
          <div className="config-input-sheet-field">
            数据库表名：<FormItem name="sheetName" tipClass="config-tip" title="表名" style={{ display: 'inline-block' }} required>
              <input type="text" className="config-input" />
            </FormItem>
          </div>
          <div style={{ color: 'white' }}>字段名：</div>
          <div className="config-input-keys-field">
            {keys.map((item, index) => (
              <div className="config-input-key-field">
                <FormItem
                  name={`${item}${index + 1}value`}
                  tipClass="config-tip"
                  title={`字段${index + 1}的名字`}
                  style={{ display: 'inline-block', width: '150px', margin: '10px 10px 0 0', }}
                  required
                >
                  <input type="text" className="config-input" />
                </FormItem>
                <FormItem
                  name={`${item}${index + 1}count`}
                  tipClass="config-tip"
                  title="length"
                  style={{ width: '60px', marginTop: '10px' }}
                  required
                >
                  <select>
                    <option value="">length</option>
                    <option value="7">7</option>
                    <option value="15">15</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="254">254</option>
                    <option value="1000">1000+</option>
                  </select>
                </FormItem>
              </div>
            ))}
            <div className="config-button" style={{ borderRadius: '7px' }} onClick={onIncrease}>新增</div>
          </div>
        </Form>
      </div>
      <div className="inc-submit-field">
        <div className="inc-submit" onClick={onSubmit}>确定</div>
        <div className="inc-submit" onClick={onCancel} style={{ marginLeft: '15px' }}>取消</div>
      </div>
    </div>
  )
}
export default Config;